import React from 'react'
import PropTypes from 'prop-types';
import { Steps, List, InputItem, Picker, Button, WhiteSpace } from 'antd-mobile'
import CommonHeader from 'COMPONENT/CommonHeader';
import './index.less'
import city2 from '../../../assets/js/city2'
// ========================================
const Step = Steps.Step;
const Item = List.Item;
// ========================================
class HmdMain extends React.Component {
	static contextTypes = {
	    router: PropTypes.object.isRequired
  	}
	
    constructor () {
        super();
        this.state = {
            workInput: '',
            phoneInput: '',
            haha: '',
            businessValue:'0',
            companyValue:'2',
            positionValue:'0',
            cityValue:["上海市"],
            gjjValue:'1',
        };
    }
    componentDidMount () {
    }
    render() {
        let that = this;
        // steps
        let stepsArr = [{
            title: '单位信息',
            description: '单位信息'
        }, {
            title: '学历收入',
            description: '学历收入'
        }, {
            title: '联系方式',
            description: '联系方式',
        }].map((s, i) => <Step key={i} title={s.title} />);
        // picker
        let pickers = {
            'workInput': { title: '工作单位', placeholder: '工作单位',initValue:'上海市' },
            'business': [
                {label: '农、林、牧、渔', value: '0', title: '所属行业'},
                {label: '其他', value: '1', title: '所属行业'}
            ],
            'company': [
                {label: '国有企业', value: '2', title: '单位性质'},
                {label: '私有企业', value: '1', title: '单位性质'},
                {label: '其他', value: '0', title: '单位性质'}
            ],
            'position': [
                {label: '普通人员', value: '0', title: '职务'},
                {label: '初级干部', value: '1', title: '职务'},
                {label: '中级干部', value: '2', title: '职务'},
                {label: '高级干部', value: '3', title: '职务'},
                {label: '其他', value: '4', title: '职务'}
            ],
            'phoneInput': { title: '单位电话', placeholder: '单位电话',initValue:'13242343212' },
            'city': city2,
            'addressInput': { title: ' ', placeholder: '单位地址' ,initValue:'浦东新区'},
            'gjj': [
                {label: '青岛市住房公积金管理中心', value: '1', title: '公积金缴存地区'},
                {label: '其他', value: '0', title: '公积金缴存地区'}
            ]
        };
        let pickerArr = [];
        for (var key in pickers) {
            (function (key) {
                if (key.indexOf('Input') > -1) {
                    pickerArr.push(
                        <InputItem clear placeholder={pickers[key].placeholder}
                                    defaultValue={pickers[key].initValue}
                                    onChange={ val => {that.setState({[key]: val})} }>
                            {pickers[key].title}
                        </InputItem>
                    );
                } else {
                    var arr = pickers[key];
                    pickerArr.push(
                        <Picker data={ arr } cols={key === 'city' ? 3 : 1}
                                value={that.state[key + 'Value']}
                                onChange={v => {that.setState({ [key + 'Value']: v });}}
                                onOk={v => that.setState({ [key + 'Value']: v })}
                        >
                            <Item arrow="horizontal">{key === 'city' ? '单位地址' : arr[0].title}</Item>
                        </Picker>
                    );
                }
            })(key);
        }
        return (
            <div id="infoStepOne">
                <CommonHeader
                    name='信用贷'
                    leftContentTitle="@back"
                />
                <div style={{paddingTop: '50px'}}></div>
                <Steps current={0} direction="horizontal" size="small"
                       style={{paddingTop: '30px', paddingBottom: '20px', backgroundColor: '#fff'}}>
                    {stepsArr}
                </Steps>
                <div className="infoStepOne-notice">
                    为了您能顺利申请交行惠民贷，请
                    <span className="infoStepOne-notice-yellow">准确填写</span>
                    以下信息
                </div>
                <List>
                    {pickerArr}
                </List>
                <WhiteSpace size="lg" />
                <div className="btnGroup-one">
				    <Button type="primary" className="btnGroup-one-btn" onClick={()=>{
                    	that.context.router.push({
							pathname: '/HmdMain/InfoStepTwo'
						});
                    }}>下一步：填写学历及收入信息</Button>
				</div>
            </div>
        );
    }
}
// ========================================
export default HmdMain;